<template>
	<div class="">
		<!--<base-header></base-header>-->
		<div class="brace-bg"></div>
		<div class="event">
			<div class="event-main">
				<div>{{eventM.content}}</div>
				<div>{{eventM.event_day}}</div>
			</div>
			<div class="text-center">
				<span @click="edit" class="event-span">修改</span>
			</div>
			<div class="text-center">
				<span @click="del" class="event-span">删除</span>
			</div>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	export default {
		name: 'BraceType',
		components: {
			BaseHeader
		},
		data() {
			return {
				uid: "",
				token: "",
				eid: '',
				eventM: '',
			}
		},
		mounted() {
			this.eid = this.$route.params.eid;
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			this.getEvent();
		},
		methods: {
			//获取事件详情
			getEvent() {
				var self = this;
				var data = {
					id: self.eid,
					uid: self.uid,
					token: self.token
				};
				$.post(global.domain + global.API.braces_event_info, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.eventM = msg.data;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			//删除
			del(id) {
				var self = this;
				var data = {
					id: self.eid,
					uid: self.uid,
					token: self.token
				};
				$.post(global.domain + global.API.braces_event_remove, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.$router.back(-1);
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			//修改
			edit() {
				this.$router.push({
					name: 'EditEvent',
					params: {
						eid: this.eid
					}
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/brace.css";
	.event {
		position: fixed;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.2);
		width: 100%;
		padding: 30px;
		color: #fff;
	}
	
	.event-main {
		margin-bottom: 30px;
	}
	
	.event-main div:first-child {
		font-size: 20px;
	}
	
	.event-span {
		padding: 10px 20px;
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 6px;
		width: 100%;
		margin: 10px 0;
	}
</style>